<template>
  <div>
    <h4 class="rad-txt" style="margin-top:-50px">
      <span class="abtxt1">我的</span>
      <span class="abtext">订单</span>
    </h4>
    <div class="container">
      <div class="row thumbnail center">
        <div class="col-sm-12 thumbnail">
          <div class="col-sm-3 line-center">订单编号</div>
          <div class="col-sm-2 line-center">订单状态</div>
          <div class="col-sm-2 line-center">创建时间</div>
          <div class="col-sm-2 line-center">支付时间</div>
          <div class="col-sm-2 line-center">订单总价</div>
          <div class="col-sm-3 line-center">操作</div>
        </div>
        <div class="list-group" v-for="(item,i) in page.list" :key="i">
          <div class="col-sm-12  list-group-item">
            <div @click="showSingleOrder(item)" class="col-sm-3 line-center">{{item.orderNum}}</div>
            <div @click="showSingleOrder(item)" v-if="item.orderState==0" class="col-sm-2 line-center">未付款</div>
            <div @click="showSingleOrder(item)" v-if="item.orderState==1" class="col-sm-2 line-center">已付款</div>
            <div @click="showSingleOrder(item)" v-if="item.orderState==2" class="col-sm-2 line-center">已取消</div>
            <div @click="showSingleOrder(item)" v-if="item.orderState==3" class="col-sm-2 line-center">已完成</div>
            <div @click="showSingleOrder(item)" v-if="item.orderState==4" class="col-sm-2 line-center">退款申请中</div>
            <div @click="showSingleOrder(item)" v-if="item.orderState==5" class="col-sm-2 line-center">正在退款</div>
            <div @click="showSingleOrder(item)" v-if="item.orderState==6" class="col-sm-2 line-center">退款成功</div>
            <div @click="showSingleOrder(item)" v-if="item.orderState==8" class="col-sm-2 line-center">退款申请被驳回</div>
            <div @click="showSingleOrder(item)" class="col-sm-2 line-center">{{ item.createTime==null?"":item.createTime.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') }}</div>
            <div @click="showSingleOrder(item)" class="col-sm-2 line-center">{{ item.payTime==null?"":item.payTime.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') }}</div>
            <div @click="showSingleOrder(item)" class="col-sm-2 line-center">{{item.orderPrice}}元</div>
            <div class="col-sm-3 line-center">
              <button @click="showSingleOrder(item)" class="btn btn-embossed">查看详情</button>
              <button @click="deleteOrder(item.orderNum)" v-if="item.orderState==1||item.orderState==2" class="btn btn-danger">删除订单</button>
              <button v-if="item.orderState==0" @click="payment(item.orderNum)" class="btn btn-success">点击支付</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-row style="margin-left: 300px;">
      <el-col :span="5">
        <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageNumChange"
          :current-page="page.current"
          :page-sizes="[1, 5, 10]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: {}
    };
  },
  methods: {
    pageSizeChange(size) {
      this.page.current = 1;
      this.splitePage(this.page.current, size);
    },
    pageNumChange(current) {
      this.splitePage(current, this.page.size);
    },
    listOrders() {
      //查找全部
      //调用分页函数
      this.splitePage(this.page.current, this.page.size);
    },
    splitePage(pageNum, pageSize) {
      this.$http
        .get("/orderInfo/user/selectOrders", {
          params: {
            pageNum: pageNum,
            pageSize: pageSize
          }
        })
        .then(resp => {
          console.log(resp.data.data)
          //将分页信息传入data区中
          this.page = resp.data.data;
        });
    },
    showSingleInfo(obj) {
      sessionStorage.setItem("singleBookId", obj.bookId);
      this.$router.push("/showSingleBookInfo");
    },
    showSingleOrder(item){
      sessionStorage.setItem("singleOrder", JSON.stringify(item));
      sessionStorage.setItem("singleOrderId", item.orderNum);
      this.$router.push("/showSingleOrder");
    },
    payment(orderId){
      this.$http.post("orderInfo/user/pagePay",{
        orderId:orderId,
        returnUrl:"http://localhost:8080/#/showOrderList"
      }).then(resp=>{
        document.write(resp.data.data)
      })
    },
    deleteOrder(orderNum){
      this.$http.get("/orderInfo/user/deleteOrder?orderNum="+orderNum).then(resp=>{
        alert(resp.data.message)
        this.listOrders();
      })
    }
  },
  created() {
    this.listOrders();
  }
};
</script>

<style scoped>
@import "../../../assets/login/css/style.css";
@import "../../../assets/bootstrap-3.3.4/dist/css/bootstrap.min.css";
@import "../../../assets/Flat-UI-master/dist/css/flat-ui.min.css";
.row {
  margin-left: 20px;
  margin-right: 20px;
}

.line-center {
  line-height: 50px;
  text-align: center;
}

.row input {
  width: 50px;
}

.list-group-item:hover {
  background: #27ae60;
}

.list-group-item div:first-child:hover {
  cursor: pointer;
}
</style>
